<template>
  <div v-if="visable" :class="{'is-fixed' : fixed}" class="app-backdrop" @click="trigger" />
</template>

<script>
const INDEX = 101

export default {
  name: 'AppBackdrop',
  componentName: 'AppBackdrop',
  props: {
    fixed: Boolean,
    visable: Boolean,
    trigger: Function,
    zIndex: {
      type: Number,
      default: INDEX
    }
  },
  updated() {
    const { zIndex, $el } = this
    if (zIndex > INDEX) {
      $el.style && ($el.style.zIndex = zIndex)
    }
  },
  install(Vue) {
    Vue.component(this.componentName, this)
  }
}
</script>

<style lang="scss">
.app-backdrop {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 101;
  background-color: #000;
  opacity: 0.3;

  &.is-fixed {
    position: fixed;
  }
}
</style>
